<template>
  <div class="image-annotation-editor">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        :before-upload="handleImageUpload"
        accept="image/*"
      >
        <el-button type="primary">
          <el-icon><Upload /></el-icon>
          {{ hasBackgroundImage ? "更换底图" : "上传底图" }}
        </el-button>
      </el-upload>

      <el-button v-if="hasBackgroundImage" type="danger" @click="clearAll">
        <el-icon><Delete /></el-icon>
        清空所有
      </el-button>

      <el-button
        v-if="hasBackgroundImage && annotations.length > 0"
        type="success"
        @click="showAnnotationDrawer = true"
      >
        <el-icon><List /></el-icon>
        标注列表 ({{ annotations.length }})
      </el-button>

      <el-button
        v-if="hasBackgroundImage"
        type="primary"
        @click="openFullscreenPreview"
      >
        <el-icon><FullScreen /></el-icon>
        全屏预览
      </el-button>
    </div>

    <!-- 主要内容区域 -->
    <div v-if="hasBackgroundImage" class="main-content">
      <!-- 图片编辑区域 -->
      <div class="image-section">
        <div class="image-container custom-scrollbar" ref="imageContainer">
          <div class="image-wrapper" ref="imageWrapper">
            <img
              :src="backgroundImage.url"
              :style="imageStyle"
              @click="handleImageClick"
              @load="handleImageLoad"
              ref="backgroundImg"
              alt="底图"
            />

            <!-- 标注点 -->
            <AnnotationPoint
              v-for="annotation in annotations"
              :key="annotation.id"
              :annotation="annotation"
              :is-editing="currentEditingId === annotation.id"
              :container-width="containerWidth"
              :container-height="containerHeight"
              @onPoint="editAnnotation"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑标注点表单组件 -->
    <AnnotationEditForm
      ref="annotationEditForm"
      v-model:visible="showEditDialog"
      :initial-data="editForm"
      :is-new="isNewAnnotation"
      :allow-delete="true"
      @save="handleSaveAnnotation"
      @delete="handleDeleteAnnotation"
      @cancel="handleCancelEdit"
    />

    <!-- 标注列表抽屉组件 -->
    <AnnotationListDrawer
      v-model:visible="showAnnotationDrawer"
      :annotations="annotations"
      businessCode="pc_background_image"
      :current-editing-id="currentEditingId"
      :allow-add="hasBackgroundImage"
      @add-new="handleAddNewAnnotation"
      @edit="handleEditAnnotation"
      @delete="handleDeleteAnnotationFromList"
      @select="handleSelectAnnotation"
      @close="handleCloseDrawer"
    />

    <!-- 全屏预览弹窗 -->
    <el-dialog
      v-model="showFullscreenPreview"
      title=""
      width="100%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      fullscreen
      class="fullscreen-preview-dialog"
    >
      <div class="preview-container">
        <!-- 预览工具栏 -->
        <div class="preview-toolbar">
          <div class="toolbar-left">
            <h2>景点标注预览</h2>
            <span class="annotation-count"
              >{{ annotations.length }} 个标注点</span
            >
          </div>

          <div class="toolbar-center">
            <!-- 设备切换按钮 -->
            <el-radio-group v-model="previewMode" size="large">
              <el-radio-button label="pc">
                <el-icon><Monitor /></el-icon>
                PC端
              </el-radio-button>
              <el-radio-button label="mobile">
                <el-icon><Iphone /></el-icon>
                移动端
              </el-radio-button>
            </el-radio-group>
          </div>

          <div class="toolbar-right">
            <el-button type="danger" @click="closeFullscreenPreview">
              <el-icon><CloseBold /></el-icon>
              关闭预览
            </el-button>
          </div>
        </div>

        <!-- 设备框架预览区域 -->
        <div class="device-preview-area preview-scrollbar">
          <!-- PC设备框架 -->
          <div v-if="previewMode === 'pc'" class="device-frame pc-frame">
            <div class="pc-screen">
              <div class="pc-browser-bar">
                <div class="browser-controls">
                  <span class="control-dot red"></span>
                  <span class="control-dot yellow"></span>
                  <span class="control-dot green"></span>
                </div>
                <div class="address-bar">
                  <span>https://景点标注系统.com</span>
                </div>
              </div>
              <div class="pc-content" ref="pcPreviewContainer">
                <div class="preview-image-wrapper" :style="pcImageWrapperStyle">
                  <img
                    :src="backgroundImage.url"
                    :style="previewImageStyle"
                    @load="handlePreviewImageLoad"
                    ref="pcPreviewImg"
                    alt="预览图片"
                  />

                  <!-- PC端标注点 -->
                  <AnnotationPoint
                    v-for="annotation in annotations"
                    :key="`pc-${annotation.id}`"
                    :annotation="annotation"
                    :is-preview="true"
                    :container-width="pcContainerWidth"
                    :container-height="pcContainerHeight"
                    @click="showPreviewAnnotationDetail"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 移动设备框架 -->
          <div v-else class="device-frame mobile-frame">
            <div class="mobile-screen">
              <div class="mobile-status-bar">
                <span class="time">9:41</span>
                <div class="status-icons">
                  <span class="signal">●●●</span>
                  <span class="wifi">📶</span>
                  <span class="battery">🔋</span>
                </div>
              </div>
              <div class="mobile-content" ref="mobilePreviewContainer">
                <div
                  class="preview-image-wrapper"
                  :style="mobileImageWrapperStyle"
                >
                  <img
                    :src="backgroundImage.url"
                    :style="previewImageStyle"
                    @load="handlePreviewImageLoad"
                    ref="mobilePreviewImg"
                    alt="预览图片"
                  />

                  <!-- 移动端标注点 -->
                  <AnnotationPoint
                    v-for="annotation in annotations"
                    :key="`mobile-${annotation.id}`"
                    :annotation="annotation"
                    :is-preview="true"
                    :container-width="mobileContainerWidth"
                    :container-height="mobileContainerHeight"
                    @click="showPreviewAnnotationDetail"
                  />
                </div>
              </div>
              <div class="mobile-home-indicator"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预览模式下的标注详情 -->
      <el-dialog
        v-model="showPreviewDetailDialog"
        :title="currentPreviewAnnotation?.title || '标注详情'"
        width="500px"
        :append-to-body="true"
        :close-on-click-modal="true"
      >
        <div v-if="currentPreviewAnnotation" class="annotation-detail">
          <div class="detail-header">
            <el-icon class="detail-icon"><Location /></el-icon>
            <h3>{{ currentPreviewAnnotation.title }}</h3>
          </div>

          <div class="detail-content">
            <div class="detail-section">
              <h4>详细描述</h4>
              <p class="description-text">
                {{ currentPreviewAnnotation.description || "暂无描述信息" }}
              </p>
            </div>

            <div class="detail-section">
              <h4>位置信息</h4>
              <div class="position-info">
                <el-tag type="primary" size="large">
                  <el-icon><Position /></el-icon>
                  X: {{ currentPreviewAnnotation.left }}%
                </el-tag>
                <el-tag type="success" size="large">
                  <el-icon><Position /></el-icon>
                  Y: {{ currentPreviewAnnotation.top }}%
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import {
  Upload,
  View,
  Download,
  Delete,
  Plus,
  Edit,
  List,
  FullScreen,
  Monitor,
  Iphone,
  CloseBold,
  Location,
  Position,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AnnotationPoint from "./AnnotationPoint.vue";
import AnnotationEditForm from "./AnnotationEditForm.vue";
import AnnotationListDrawer from "./AnnotationListDrawer.vue";
import { annotationApi, fileApi, commonApi } from "@/api";

export default {
  name: "ImageAnnotationEditor",
  components: {
    AnnotationPoint,
    AnnotationEditForm,
    AnnotationListDrawer,
    Upload,
    View,
    Download,
    Delete,
    Plus,
    Edit,
    List,
    FullScreen,
    Monitor,
    Iphone,
    CloseBold,
    Location,
    Position,
  },
  data() {
    return {
      annotations: [],
      showEditDialog: false,
      showAnnotationDrawer: false,
      isNewAnnotation: false,
      editForm: {
        id: null,
        title: "",
        description: "",
        left: 0,
        top: 0,
      },
      containerWidth: 800,
      containerHeight: 600,
      imageStyle: {
        maxWidth: "100%",
        maxHeight: "600px",
      },
      resizeTimer: null, // 防抖定时器

      // 全屏预览相关
      showFullscreenPreview: false,
      previewMode: "pc", // 'pc' 或 'mobile'
      showPreviewDetailDialog: false,
      currentPreviewAnnotation: null,
      pcContainerWidth: 1200,
      pcContainerHeight: 800,
      mobileContainerWidth: 375,
      mobileContainerHeight: 667,
    };
  },
  computed: {
    ...mapState(["backgroundImage", "currentEditingId"]),
    ...mapGetters(["hasBackgroundImage"]),

    // PC端预览图片包装器样式
    pcImageWrapperStyle() {
      if (!this.hasBackgroundImage) return {};

      const maxWidth = 1200; // 更大的PC端宽度
      const maxHeight = 800;

      const imageRatio =
        this.backgroundImage.width / this.backgroundImage.height;
      const containerRatio = maxWidth / maxHeight;

      let width, height;

      if (imageRatio > containerRatio) {
        width = maxWidth;
        height = maxWidth / imageRatio;
      } else {
        height = maxHeight;
        width = maxHeight * imageRatio;
      }

      return {
        width: `${width}px`,
        height: `${height}px`,
        position: "relative",
      };
    },

    // 移动端预览图片包装器样式
    mobileImageWrapperStyle() {
      if (!this.hasBackgroundImage) return {};

      const maxWidth = 335; // 移动端屏幕宽度减去边距
      const maxHeight = 600;

      const imageRatio =
        this.backgroundImage.width / this.backgroundImage.height;
      const containerRatio = maxWidth / maxHeight;

      let width, height;

      if (imageRatio > containerRatio) {
        width = maxWidth;
        height = maxWidth / imageRatio;
      } else {
        height = maxHeight;
        width = maxHeight * imageRatio;
      }

      return {
        width: `${width}px`,
        height: `${height}px`,
        position: "relative",
      };
    },

    // 预览模式下的图片样式
    previewImageStyle() {
      return {
        width: "100%",
        height: "100%",
        objectFit: "contain",
        display: "block",
      };
    },
  },
  async created() {
    this.getBackgroundImage();
    this.getLists();
  },
  mounted() {
    window.addEventListener("resize", this.updateContainerSize);

    // 添加页面可见性变化监听，优化内存使用
    document.addEventListener("visibilitychange", this.handleVisibilityChange);
  },
  beforeUnmount() {
    // 清理事件监听器
    window.removeEventListener("resize", this.updateContainerSize);
    document.removeEventListener(
      "visibilitychange",
      this.handleVisibilityChange
    );

    // 清理图片资源
    this.cleanupPreviousImage();

    // 清理定时器（如果有的话）
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = null;
    }
  },
  methods: {
    ...mapMutations([
      "SET_BACKGROUND_IMAGE",
      "ADD_ANNOTATION",
      "UPDATE_ANNOTATION",
      "DELETE_ANNOTATION",
      "SET_CURRENT_EDITING",
      "CLEAR_ALL_DATA",
    ]),
    ...mapActions(["saveToLocal", "loadFromLocal"]),
    async getBackgroundImage() {
      const res = await commonApi.getConfig("pc_background_image");
      console.log("[pc]-bac", res);
      this.backgroundImage.url = res.data?.configValues || "";
    },
    async getLists() {
      const lists = await annotationApi.getList({
        pageNum: 1,
        pageSize: 1000,
        businessCode: "pc_background_image",
      });
      console.log("标注列表", lists);
      this.annotations = lists.data?.records.map((el) => {
        return {
          ...el,
          left: el.largeScreenLeft,
          top: el.largeScreenTop,
        };
      });
    },
    // 处理图片上传
    async handleImageUpload(file) {
      // 检查文件大小（限制为10MB）
      const maxSize = 10 * 1024 * 1024; // 10MB
      if (file.size > maxSize) {
        ElMessage.error("图片文件大小不能超过10MB");
        return false;
      }

      // 检查文件类型
      const allowedTypes = [
        "image/jpeg",
        "image/jpg",
        "image/png",
        "image/gif",
        "image/webp",
      ];
      if (!allowedTypes.includes(file.type)) {
        ElMessage.error("只支持 JPEG、PNG、GIF、WebP 格式的图片");
        return false;
      }

      // 清理之前的图片资源
      this.cleanupPreviousImage();
      const res = await fileApi.upload(file);
      console.log("resrsers", res);
      this.backgroundImage.url = res.data || "";
      const tijiao = await commonApi.saveConfig({
        businessCode: "pc_background_image",
        configValues: this.backgroundImage.url,
      });
      console.log("tijiao", tijiao);
      // const reader = new FileReader()

      // 添加错误处理
      // reader.onerror = () => {
      //   ElMessage.error('图片读取失败，请重试')
      //   this.cleanupReader(reader)
      // }

      // reader.onload = (e) => {
      //   const img = new Image()

      //   // 添加图片加载错误处理
      //   img.onerror = () => {
      //     ElMessage.error('图片格式不正确或已损坏')
      //     this.cleanupImage(img)
      //     this.cleanupReader(reader)
      //   }

      //   img.onload = () => {
      //     // 检查图片尺寸（限制最大尺寸）
      //     const maxDimension = 4096
      //     if (img.width > maxDimension || img.height > maxDimension) {
      //       ElMessage.warning(`图片尺寸过大，建议使用 ${maxDimension}x${maxDimension} 以下的图片`)
      //     }

      //     this.SET_BACKGROUND_IMAGE({
      //       url: e.target.result,
      //       width: img.width,
      //       height: img.height
      //     })

      //     this.$nextTick(() => {
      //       this.updateContainerSize()
      //     })

      //     // 清理临时资源
      //     this.cleanupImage(img)
      //     this.cleanupReader(reader)
      //   }

      //   img.src = e.target.result
      // }

      // reader.readAsDataURL(file)
      return false; // 阻止自动上传
    },

    // 清理之前的图片资源
    cleanupPreviousImage() {
      if (
        this.backgroundImage.url &&
        this.backgroundImage.url.startsWith("data:")
      ) {
        // 如果是base64图片，清理引用
        this.SET_BACKGROUND_IMAGE({ url: "", width: 0, height: 0 });
      }
    },

    // 清理图片对象
    cleanupImage(img) {
      if (img) {
        img.onload = null;
        img.onerror = null;
        img.src = "";
      }
    },

    // 清理FileReader对象
    cleanupReader(reader) {
      if (reader) {
        reader.onload = null;
        reader.onerror = null;
      }
    },

    // 图片加载完成
    handleImageLoad() {
      this.updateContainerSize();
    },

    // 更新容器尺寸（防抖处理）
    updateContainerSize() {
      // 清除之前的定时器
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }

      // 使用防抖处理，避免频繁更新
      this.resizeTimer = setTimeout(() => {
        if (this.$refs.backgroundImg && this.$refs.backgroundImg.complete) {
          const img = this.$refs.backgroundImg;
          this.containerWidth = img.clientWidth;
          this.containerHeight = img.clientHeight;
        }
        this.resizeTimer = null;
      }, 100);
    },

    // 处理页面可见性变化
    handleVisibilityChange() {
      if (document.hidden) {
        // 页面隐藏时，暂停不必要的操作
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer);
          this.resizeTimer = null;
        }
      } else {
        // 页面显示时，重新更新容器尺寸
        this.$nextTick(() => {
          this.updateContainerSize();
        });
      }
    },

    // 点击图片添加标注点
    handleImageClick(event) {
      // 确保点击的是图片元素
      if (event.target.tagName !== "IMG") return;

      const imgRect = event.target.getBoundingClientRect();
      const x = event.clientX - imgRect.left;
      const y = event.clientY - imgRect.top;

      // 计算相对于图片的百分比位置
      const leftPercent = (x / imgRect.width) * 100;
      const topPercent = (y / imgRect.height) * 100;

      // 确保坐标在有效范围内
      const validLeft = Math.max(0, Math.min(100, leftPercent));
      const validTop = Math.max(0, Math.min(100, topPercent));

      this.openEditDialog(true, {
        left: Math.round(validLeft * 100) / 100,
        top: Math.round(validTop * 100) / 100,
      });
    },

    // 打开编辑对话框
    openEditDialog(isNew = false, data = {}) {
      console.log("data", data);
      this.isNewAnnotation = isNew;
      this.editForm = {
        id: data.id || null,
        ...data,
      };
      this.showEditDialog = true;
    },

    // 编辑标注点
    editAnnotation(annotation) {
      console.log("annotation", annotation);
      this.SET_CURRENT_EDITING(annotation.id);
      this.openEditDialog(false, {
        ...annotation,
        left: annotation.largeScreenLeft,
        top: annotation.largeScreenTop,
      });
    },

    // 保存标注点
    saveAnnotation() {
      if (this.isNewAnnotation) {
        this.ADD_ANNOTATION(this.editForm);
      } else {
        this.UPDATE_ANNOTATION({
          id: this.editForm.id,
          data: this.editForm,
        });
      }
      this.SET_CURRENT_EDITING(null);
      this.showEditDialog = false;
      this.resetEditForm();
      ElMessage.success("保存成功");
    },

    // 删除标注点
    deleteAnnotation(id) {
      const annotation = this.annotations.find((item) => item.id === id);
      const title = annotation ? annotation.title : "标注点";

      ElMessageBox.confirm(
        `确定要删除标注点"${title}"吗？此操作不可恢复！`,
        "删除确认",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: false,
          // customClass: 'delete-confirm-dialog'
        }
      )
        .then(() => {
          this.DELETE_ANNOTATION(id);
          ElMessage.success(`标注点"${title}"已删除`);
        })
        .catch(() => {
          // 用户取消删除，不做任何操作
        });
    },

    // 保存数据
    saveData() {
      ElMessage.success("数据已保存到本地");
    },

    // 清空所有数据
    clearAll() {
      ElMessageBox.confirm("确定要清空所有数据吗？此操作不可恢复！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.CLEAR_ALL_DATA();
          localStorage.removeItem("annotation-data");
          ElMessage.success("已清空所有数据");
        })
        .catch(() => {
          // 用户取消清空，不做任何操作
        });
    },

    // 打开全屏预览
    openFullscreenPreview() {
      if (!this.hasBackgroundImage) {
        ElMessage.warning("请先上传底图");
        return;
      }
      this.showFullscreenPreview = true;
      this.$nextTick(() => {
        this.updatePreviewContainerSize();
      });
    },

    // 关闭全屏预览
    closeFullscreenPreview() {
      this.showFullscreenPreview = false;
      this.showPreviewDetailDialog = false;
      this.currentPreviewAnnotation = null;
    },

    // 预览图片加载完成
    handlePreviewImageLoad() {
      this.updatePreviewContainerSize();
    },

    // 更新预览容器尺寸
    updatePreviewContainerSize() {
      this.$nextTick(() => {
        if (this.previewMode === "pc" && this.$refs.pcPreviewImg) {
          const img = this.$refs.pcPreviewImg;
          this.pcContainerWidth = img.clientWidth;
          this.pcContainerHeight = img.clientHeight;
        } else if (
          this.previewMode === "mobile" &&
          this.$refs.mobilePreviewImg
        ) {
          const img = this.$refs.mobilePreviewImg;
          this.mobileContainerWidth = img.clientWidth;
          this.mobileContainerHeight = img.clientHeight;
        }
      });
    },

    // 显示预览模式下的标注详情
    showPreviewAnnotationDetail(annotation, event) {
      if (event) {
        event.stopPropagation();
      }
      this.currentPreviewAnnotation = annotation;
      this.showPreviewDetailDialog = true;
    },

    // 删除当前正在编辑的标注点
    deleteCurrentAnnotation() {
      if (!this.editForm.id) return;

      ElMessageBox.confirm(
        `确定要删除标注点"${this.editForm.title}"吗？此操作不可恢复！`,
        "删除确认",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: false,
        }
      )
        .then(() => {
          // 执行删除
          this.DELETE_ANNOTATION(this.editForm.id);

          // 关闭对话框
          this.showEditDialog = false;

          // 重置表单
          this.resetEditForm();

          // 显示成功消息
          ElMessage.success("标注点已删除");
        })
        .catch(() => {
          // 用户取消删除，不做任何操作
        });
    },

    // 重置编辑表单
    resetEditForm() {
      this.editForm = {
        id: null,
        title: "",
        description: "",
        left: 0,
        top: 0,
      };
      this.isNewAnnotation = false;
    },

    // 取消编辑
    cancelEdit() {
      this.showEditDialog = false;
      this.resetEditForm();
      // 清除当前编辑状态
      this.SET_CURRENT_EDITING(null);
    },

    // === 新的封装组件事件处理方法 ===

    // 处理保存标注点（来自AnnotationEditForm组件）
    async handleSaveAnnotation(formData) {
      try {
        let form = {
          ...formData,
          largeScreenTop: formData.top,
          largeScreenLeft: formData.left,
          buildingImgUrl: formData.imageUrl,
          businessCode: "pc_background_image",
        };
        if (formData.isNew) {
          // 添加新标注点

          const res = await annotationApi.create(form);
          console.log("添加", res);
          if (res.code == 200) {
            this.getLists();
          }
        } else {
          // 更新现有标注点
          const res = await annotationApi.update(formData);
          if (res.code == 200) {
            this.getLists();
          }
        }
        // 清除编辑状态
        this.SET_CURRENT_EDITING(null);

        // 关闭对话框并显示成功消息
        this.$refs.annotationEditForm?.showSuccessAndClose(
          formData.isNew ? "标注点添加成功" : "标注点更新成功"
        );
        this.handleCloseDrawer();
        // 重置表单
        this.resetEditForm();
      } catch (error) {
        console.error("保存标注点失败:", error);
        this.$refs.annotationEditForm?.showError("保存失败，请重试");
      }
    },

    // 处理删除标注点（来自AnnotationEditForm组件）
    async handleDeleteAnnotation(id) {
      try {
        const res = await annotationApi.delete(id);
        if (res.code == 200) {
          this.getLists();
        }
        this.SET_CURRENT_EDITING(null);

        // 关闭对话框并显示成功消息
        this.$refs.annotationEditForm?.showSuccessAndClose("标注点删除成功");

        // 重置表单
        this.resetEditForm();
      } catch (error) {
        console.error("删除标注点失败:", error);
        this.$refs.annotationEditForm?.showError("删除失败，请重试");
      }
    },

    // 处理取消编辑（来自AnnotationEditForm组件）
    handleCancelEdit() {
      this.SET_CURRENT_EDITING(null);
      this.resetEditForm();
    },

    // 处理添加新标注点（来自AnnotationListDrawer组件）
    handleAddNewAnnotation() {
      this.openEditDialog(true);
    },

    // 处理编辑标注点（来自AnnotationListDrawer组件）
    handleEditAnnotation(annotation) {
      this.editAnnotation(annotation);
    },

    // 处理从列表删除标注点（来自AnnotationListDrawer组件）
    async handleDeleteAnnotationFromList(id) {
      try {
        const res = await annotationApi.delete(id);
        if (res.code == 200) {
          this.getLists();
        }
        this.SET_CURRENT_EDITING(null);
        this.handleCloseDrawer();
        // 关闭对话框并显示成功消息
        this.$refs.annotationEditForm?.showSuccessAndClose("标注点删除成功");
      } catch (error) {
        console.error("删除标注点失败:", error);
        ElMessage.error("删除失败，请重试");
      }
    },

    // 处理选择标注点（来自AnnotationListDrawer组件）
    handleSelectAnnotation(annotation) {
      // 可以在这里添加选择标注点的逻辑，比如高亮显示
      this.SET_CURRENT_EDITING(annotation.id);
    },

    // 处理关闭抽屉（来自AnnotationListDrawer组件）
    handleCloseDrawer() {
      this.showAnnotationDrawer = false;
    },
  },
};
</script>

<style scoped>
@import "./editor.css";
</style>
